<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!--    Author 卢元庆-->
    <meta charset="UTF-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!--    <link rel="stylesheet" href="/tingche/css/layui.css">-->
    <style>
        body {
            background-color: rgb(240, 242, 245);
            padding: 10px;
        }

        .layadmin-backlog {
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layadmin-backlog-body {
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layadmin-backlog-body h3 {
            padding-bottom: 10px;
            font-size: 16px
        }

        .layadmin-backlog-body p cite {
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688
        }

        .layadmin-backlog-body:hover {
            background-color: #f2f2f2;
            color: #888
        }

        /*斜方向彩带*/
        .ribbon {
            background-color: #a00;
            overflow: hidden;
            white-space: nowrap;
            position: absolute;
            /* shadom */
            box-shadow: 0 0 10px #888;
            /* rotate */
            transform: rotate(45deg);
            /* position */
            right: -44px;
            top: 36px;
            z-index: 1000;
        }

        .ribbon a {
            border: 1px solid #faa;
            color: #fff;
            display: block;
            /*font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
            margin: 1px 0;
            padding: 10px 50px;
            text-align: center;
            text-decoration: none;
            /* shadow */
            text-shadow: 0 0 5px #444;
        }

        #zuyuan > li {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div style="height: 210px" class="layui-card">
                        <div class="layui-card-header">
                            <h2>小组成员 <i class="layui-icon layui-icon-group" style=" color: #1E9FFF;"></i></h2>
                        </div>
                        <div class="layui-card-body">
                            <ul id="zuyuan">
                                <li>组长：<i class="layui-icon layui-icon-male"></i> 卢元庆- 系统管理/首页
                                </li>
                                <li>组员：<i class="layui-icon layui-icon-male"></i> 谢川东- 计费出库模块
                                </li>
                                <li>组员：<i class="layui-icon layui-icon-male"></i> 李沅泽- 车辆入库模块
                                </li>
                                <li>组员：<i class="layui-icon layui-icon-male"></i><span
                                        style="opacity: 0">林</span> 林雄- 车库管理模块
                                </li>
                                <li>组员：<i class="layui-icon layui-icon-female"></i> 孙菊红- 出入库日志管理
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div style="height: 210px" class="layui-card">
                        <div class="layui-card-header">
                            <h2>项目进度 <i class="layui-icon layui-icon-time" style=" color: #1E9FFF;"></i></h2>
                        </div>
                        <div class="layui-card-body">
                            后端部分
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                <div class="layui-progress-bar layui-bg-green" lay-percent="70%"></div>
                            </div>
                            前端部分
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                <div class="layui-progress-bar layui-bg-blue" lay-percent="90%"></div>
                            </div>
                            答辩部分
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes">
                                <!--                                TODO 待修改-->
                                <div class="layui-progress-bar layui-bg-red" lay-percent="80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <h2 style="text-align: center;font-weight: bold">当前所在车库状况 <i
                                    class="layui-icon layui-icon-console"></i></h2>
                        </div>
                        <div class="layui-card-body">

                            <ul class="layui-row layui-col-space10 layui-this">
                                <li class="layui-col-xs6">
                                    <a class="layadmin-backlog-body">
                                        <h3>车库名字</h3>
                                        <p><cite id="name">null</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a class="layadmin-backlog-body">
                                        <h3>当前已使用车位数</h3>
                                        <p><cite id="use">0</cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a class="layadmin-backlog-body">
                                        <h3>规划使用的车位数</h3>
                                        <p><cite><span id="gui">0</span></cite></p>
                                    </a>
                                </li>
                                <li class="layui-col-xs6">
                                    <a class="layadmin-backlog-body">
                                        <h3>最大车位数</h3>
                                        <p><cite id="max">0</cite></p>
                                    </a>
                                </li>
                            </ul>
                            <h3> 车库位置<i class="layui-icon layui-icon-location"></i>： <a style="color: rgb(0,150,136)"
                                                                                        href="https://www.baidu.com/s?ie=UTF-8&wd=%E9%87%8D%E5%BA%86%E6%B2%99%E5%9D%AA%E5%9D%9D%E5%8C%BA%E5%A4%A7%E5%AD%A6%E5%9F%8E%E4%B8%9C%E8%B7%AF20%E5%8F%B7"><span
                                    id="site">1111</span></a></h3>
                            <fieldset class="layui-elem-field layui-field-title" style="margin: 10px 0 10px;">
                                <legend> 车库使用率:</legend>
                            </fieldset>
                            <div class="layui-progress  layui-progress-big" lay-filter="pp">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
        <div class="layui-col-md5" style="overflow: hidden">
            <div class="layui-card">
                <div class="layui-card-header">
                    <h2>项目介绍 <i class="layui-icon layui-icon-app" style=" color: #1E9FFF;"></i></h2>
                </div>
                <div class="layui-card-body">
                    <h3>题目-停车场管理系统</h3>
                    <div class="layui-elem-quote">
                        为了解决这个停车难这一问题，无论是那些停车场的管理人员们，还是我们广大的车主们，
                        都需要有一套安全可靠、设计成熟的停车管理系统来满足大家的使用需求。
                        本系统的使用比起以往人工的传统记录，要更加的方便、可靠、高效，节约成本。停车管理系统是一套主要功能包括：
                        车辆的登记入库，车辆的停车收费，车库容量显示和修改，车辆的出入日志等等的系统。该系统基于B/S模式，采用JavaEE开发、
                        <s>Hibernate</s>
                        Mybatis
                        和Spring框架、MySQL数据库作为后台来实现
                    </div>
                    <h3>基本模块</h3>
                    <div class="layui-elem-quote">
                        <ul>
                            <dl>系统管理</dl>
                            <dl>车辆入库</dl>
                            <dl>车辆计费</dl>
                            <dl>车库信息管理</dl>
                            <dl>车辆出入库日志登记</dl>
                        </ul>
                    </div>
                    <h3>相关技术</h3>
                    <div class="layui-elem-quote">
                        <ul>
                            <dl>SSM框架</dl>
                            <dl>layUI前端框架</dl>
                            <dl>JQuery</dl>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 缎带 -->
            <div class="ribbon">
                <a target="_blank" href="https://github.com/someGenki/tingche_sys">Star on GitHub</a>
            </div>
        </div>


    </div>
</div>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        var $ = layui.jquery
        setTimeout(function () {
            $.get('/tingche/home/info', data => {
                const p = JSON.parse(data);
                const pp = p.data
                document.getElementById("name").innerHTML = pp.parkName;
                document.getElementById("use").innerHTML = pp.currentUse;
                document.getElementById("gui").innerHTML = pp.usableCapacity;
                document.getElementById("max").innerHTML = pp.maxCapacity;
                document.getElementById("site").innerHTML = pp.parkSite;
                element.progress('pp', `${(pp.currentUse / pp.usableCapacity) * 100}%`)
            })
        }, 400)
    });
</script>

</body>

</html>